<template>
	<view class="box">
		<view class="header_avatar">
			<view class="image">
				<view style="border: 3px solid #fff;border-radius: 50%;">
					<u--image :src="form.avatar ? form.avatar : '../../static/login/logo.png' "
						shape="circle" width="50px" height="50px" ></u--image>
				</view>
				<view class="name">
					<view class="nickName">
						{{form.nickName || '暂无获取'}}
					</view>
					<view class="phone">
						{{ hidePhoneNumber(form.phone) }}
					</view>
				</view>
			<!-- 	<view class="buttom" @click="showPopupQuit = true">
					<view>
						退出登录
					</view>
				</view> -->
				<view class="setting" @click="tosetting">
					<u-icon label="设置" name="setting" labelPos="bottom"  size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="pages">
			<u--image :showLoading="true" :src="src" width="100%" height="120px"></u--image>
			<view class="card">
				<view class="title">
					我的工具
				</view>
				<view>
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex"
							@click="clickitem(baseListItem)">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="baseListItem.name" :size="40"></u-icon>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<view class="card">
				<view class="title">
					我的服务
				</view>
				<view>
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList2" :key="baseListIndex"
							@click="clickitem2(baseListItem,baseList2)">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="32"></u-icon>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<view class="card">
				<view class="title">
					安全
				</view>
				<view>
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(setListItem,setListIndex) in setList" :key="setListIndex"
							@click="clickitem3(setListItem)">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="setListItem.name" :size="40"></u-icon>
							<text class="grid-text">{{setListItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="popup">
				<u-button type="primary" class="button" @tap="callCustomerService">拨打客服电话</u-button>
				<u-button @click="show = false">取消</u-button>
			</view>
		</u-popup>
		<u-popup :show="showPopup" mode="center" :round="10" @close="showPopup = false">
			<view class="popup">
				<view class="cue">
					谨慎操作，您确定要注销账号吗？
					<br>
					<br>
					<view style="font-size:15px;text-align: left;color:darkgrey;font-weight: 100;">
						1.注销账号将会清空您在大宾租房服务器里的相关信息，包括您的个人资料、房源数据、浏览记录等;
					</view>
					<view style="font-size: 15px;text-align: left;color:darkgrey;font-weight: 100;">
						2.账号注销后无法恢复，请谨慎操作;
					</view>
					<view style="font-size: 15px;text-align: left;color:darkgrey;font-weight: 100;">
						3.账号注销后可重新注册为新账号
					</view>
				</view>
				<view class="button_box">
					<u-button class="sure" @click="showPopup = false">取消</u-button>
					<u-button type="primary"  @click="showPopupLogout">确定</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 退出账号 -->
		<u-popup :show="showPopupQuit" mode="center" :round="10" @close="showPopupQuit = false">
			<view class="popup">
				<view class="cue">
					确定退出账号吗？
				</view>
				<view class="button_box">
					<u-button class="sure" @click="showPopupQuit = false">取消</u-button>
					<u-button type="primary"  @click="logoutOpenQuit">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>

import {
		quitLogin,
		getUserInfo,
		getCustomer,
		cancelUser
	} from '../../api/my/index.js'
	import listItem from '../../uni_modules/uview-ui/libs/config/props/listItem'
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default {
		data() {
			return {
				show: false,
				showPopup: false, //注销
				showPopupQuit: false, //退出
				src: '../../static/login/bg.png',
				baseList: [{
						name: '../../static/operate/notice.png',
						title: '通知中心',
						url: './notice'
					},
					{
						name: '../../static/operate/manage.png',
						title: '账单管理',
						// url: '/pages/home/bill/bill?tag=overdue'
						url: '../home/bill/bill?tag=all'
					},
					{
						name: '../../static/operate/argurment.png',
						title: '信息认证',
						url: './authentication'
					}
				],
				baseList2: [/* {
						name: '../../static/operate/service.png',
						title: '联系客服',
						cellClient: true
					}, */
					{
						name: '../../static/operate/feedback.png',
						title: '意见反馈',
						url: './feedback'
					},
					{
						name: '../../static/operate/privacy.png',
						title: '隐私政策',
						url: './privacy'
					},
					{
						name: '../../static/operate/agreement.png',
						title: '用户协议',
						url: './userAgreement'
					}
				],
				setList: [{
					name: '../../static/operate/putPasswoder.png',
					title: '修改密码',
					url: '../landlord/revisePassword'
				} , {
					name: '../../static/operate/logout.png',
					title: '注销账号',
					logout: true
				} ],
				form: {}
			}

		},
		onLoad() {
			this.userInfo()
		},
		methods: {
			tosetting(){
				uni.navigateTo({
					url: '/pages/my/setting/setting'
				})
			},
			hidePhoneNumber(phone) {
				if(phone) {
					return phone.substr(0, 3) + '****' + phone.substr(7);
				}else {
					return '暂无数据'
				}
				
			},
			maskedPhoneNumber: function() {
				let phoneNumber = this.phone;
				return phoneNumber.replace(/\d(?=(\d{3})+(?!\d))/g, (match, p1) => {
					if (p1.length % 4 === 0 && p1 !== phoneNumber) { // 当匹配到第四位开始的每四位一组
						return match.replace(/\d/g, '*');
					}
					return match;
				})
			},
			clickitem(baseListItem) {
				uni.navigateTo({
					url: baseListItem.url,
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})

			},
			clickitem2(baseListItem, baseList2) {
		
				if (baseListItem.cellClient) return this.show = true
				uni.navigateTo({
					url: baseListItem.url,
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})

			},
			clickitem3(setListItem) {
				if (setListItem.logout) return this.showPopup = true
				uni.navigateTo({
					url: setListItem.url,
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			//用户信息
			async userInfo() {
				
					const res = await getUserInfo()
		            if(res.data.code==500){
						uni.reLaunch({
							url: '/pages/landlord/login',
							animationType: this.animation.type,
							animationDuration: this.animation.time
						})
					}
				
					this.form = res.data.data
					uni.setStorageSync('userInfo',JSON.stringify(res.data.data))	
			},
			//注销账号
			async showPopupLogout() {
				const res = await cancelUser()
				if (res.data.code !== 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.showPopup = false
				uni.reLaunch({
					url: '/pages/landlord/login',
					animationType: this.animation.type,
					animationDuration: this.animation.time

				})
			},
			//拨打客服电话
			async callCustomerService(){
				const res = await getCustomer()
				if(res.data.code==200){
					uni.makePhoneCall({
					  phoneNumber: res.data.data.customerPhone, 
					});
				}
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.popup {
		padding: 30rpx;
		
		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}

	.cue {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		padding: 40rpx;
	}

	.box {
		background-color: $pagebgc;
		width: 100%;
		height: 100vh;
		
		.header_avatar {
			@include flexBetween;
			padding: 30rpx;
			background-color: #fff;
			box-sizing: border-box;
			.image {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				width: 100%;
				image {
					border: 2px solid black;
				}

				.name {
					margin-left: 20rpx;
					display: flex;
					flex-wrap: wrap;
					width: 55%;
					margin-right: 30rpx;
					
					.nickName {
						@include textOverflow;
						font-size: 32rpx;
						width: 100%;
					}

					.phone {
						margin-top: 5rpx;
						padding: 0 10rpx;
						border-radius: 30rpx;
						background-color: #eff3f5;
						font-size: 26rpx;
						display: flex;
						align-items: center;
					}
				}
				.setting{
					margin-left: auto;
				}

			}

			.buttom {
				color: #848484;
				padding: 5rpx 20rpx;
				border-radius: 30rpx;
				background-color: #fff;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				border: #adadad solid 1rpx;

			}
		}

		.pages {
			@include pageInit;
			padding-top: 30rpx;

			.card {
				padding: 20rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					padding: 10rpx 0;
				}

				.grid-text {
					font-size: 14px;
					font-weight: bold;
					color: #666;
					padding: 10rpx 0;
					box-sizing: border-box;
				}
			}
		}
	}
</style>